<template>
	<view class="relative ">
		<view class="mx-20">
			<u-gap></u-gap>
			<uni-data-select v-model="value" placeholder="选择分组" :localdata="range" @change="changeS"></uni-data-select>
			<u-gap></u-gap>
			<u-cell-group customStyle="background:#fff" v-if="list !=0">
				<u-cell value="添加至分组" isLink v-for="val,i in list" :key="i" @click="toggleItem(val)">
					<view slot="title" class="u-slot-title">
						<image class="pr-5" src="/static/img/cate/file.svg" style="width: 26rpx;height: 24rpx;" mode="">
						</image>
						<text class="u-cell-text">{{val.name}}</text>
					</view>
				</u-cell>
				<view class="text-center">
				</view>
			</u-cell-group>
			<view class="" v-else>
				<u-empty></u-empty>
			</view>
		</view>

		<view class="fixed w-full" style="bottom: 0;">
			<button @click="saveGroupDevice">确认分配</button>
			<u-gap></u-gap>
			<u-gap></u-gap>
		</view>
	</view>
</template>

<script>
	import {
		selectUserOwnGroupList,
		selectUserOwnUnGroupDeviceList,
		addGroup,
		editGroup,
		removeGroup,
		saveGroupDevice,
		selectOwnUserDeviceByGroupId
	} from '@/api/group/group.js'
	export default {
		data() {
			return {
				list: [],
				value: '',
				ids: '',
				/*  */
				selectedIds: [],
				range: [{
					value: "",
					text: ""
				}],
			};
		},
		methods: {
			toggleItem(item) {
				const index = this.selectedIds.indexOf(item.deviceId);
				if (index === -1) {
					// 如果该id还没被选中，则将其添加到selectedIds数组中
					this.selectedIds.push(item.deviceId);
				} else {
					// 如果该id已被选中，则从selectedIds数组中移除
					this.selectedIds.splice(index, 1);
				}
				// 更新数据
				this.updateSelectedIds();
			},
			updateSelectedIds() {
				const formattedIds = this.selectedIds.map(deviceId => `${deviceId}`).join(',');
				const result = "/" + formattedIds.substring(0);
				this.ids = result
				console.log(this.ids, "this.ids");
			},
			changeS(e) {
				console.log(e, "e");
				this.value = e
			},
			// /savegroupdevice/21/13,14,15
			saveGroupDevice() {
				let re = saveGroupDevice(this.value, this.ids)
				console.log(re, "re");
			},

			async selectUserOwnUnGroupDeviceList() {
				let re = await selectUserOwnUnGroupDeviceList()
				console.log(re, "uRE");
				this.list = re.data
			},
			async selectUserOwnGroupList() {
				let re = await selectUserOwnGroupList()
				this.range = re.data.map((i) => {
					return {
						value: i.groupId,
						text: i.groupName,
					}
				})
				console.log(re, "reange");
			},
		},
		onLoad() {

		},
		onShow() {
			this.selectUserOwnUnGroupDeviceList()
			this.selectUserOwnGroupList()
		}
	}
</script>

<style lang="scss">

</style>